<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
</head>

<body>
    <div id="app">
        <h1>{{ msg }}</h1>
        <h1>你好{{name}}</h1>
        <h2>
            {{ num1 + 1 }}
        </h2>
        <p>
            姓名：{{alex.name}},
            年龄： {{alex.age}}
            是否成年：{{ alex.age >=18?'是':'否' }}
        </p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
    // 实例化Vue对象
    let app = new Vue({
        el: '#app',         // Vue对象在页面中的作用容器
        // 当前Vue对象设置的默认数据
        data: {
            msg: '好好学习，天天向上。',
            name: '小明',
            alex: {
                name: '小明',
                age: 17
            },
            num1: 12
        }

    })
</script>

</html>